<template>
  <div class="total">
    <div class="contentDiv">
      <div class="searchDiv">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="数据字典" name="first"></el-tab-pane>
            <el-tab-pane label="应急预案库" name="second"></el-tab-pane>
<!--            <el-tab-pane label="能耗统计" name="third"></el-tab-pane>-->
<!--            <el-tab-pane label="仓库统计" name="fourth"></el-tab-pane>-->
          </el-tabs>
        </div>
        <div class="waringStyle">
          <el-date-picker
            v-model="valueDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-button class="ml10" type="primary" plain @click="jiexi">新建</el-button>
        </div>
      </div>
      <div class="tableList">
<!--        <el-table :data="tableData1"  ref="tableWaring" :header-cell-style="{ 'background-color': 'transparent' }" >-->
<!--          <el-table-column property="xh" label="序号"></el-table-column>-->
<!--          <el-table-column property="station" label="告警站点" ></el-table-column>-->
<!--          <el-table-column property="content" label="告警内容" ></el-table-column>-->
<!--          <el-table-column property="person" label="负责人信息" ></el-table-column>-->
<!--          <el-table-column property="waringji" label="告警级别">-->
<!--            <template #default="scope">-->
<!--              <span :style="{ color: getWaringColor(scope.row.waringji) }">{{ scope.row.waringji }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column property="waringDate" label="告警时间"></el-table-column>-->
<!--          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--            <template #default="scope">-->
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                @click="handleUpdate(scope.row)"-->
<!--              >查看详情</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <el-table v-if="activeName === 'first'" :data="tableData1"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号" width="100"></el-table-column>
          <el-table-column property="station" label="模块名称" ></el-table-column>
          <el-table-column property="content" label="字典类型" ></el-table-column>
          <el-table-column property="person" label="key" ></el-table-column>
          <el-table-column property="waringji" label="名称"></el-table-column>
          <el-table-column property="waringDate" label="排序"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="activeName === 'second'" :data="tableData2"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column prop="xh" label="序号" width="100"></el-table-column>
          <el-table-column prop="plantName" label="水厂名称"></el-table-column>
          <el-table-column prop="location" label="所在地区"></el-table-column>
          <el-table-column prop="contactPerson" label="联系人"></el-table-column>
          <el-table-column prop="contactNumber" label="联系电话"></el-table-column>
          <el-table-column prop="emergencyPlan" label="应急预案内容"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'third'"  :data="tableData3"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号"></el-table-column>
          <el-table-column property="station" label="姓名" ></el-table-column>
          <el-table-column property="content" label="部门" ></el-table-column>
          <el-table-column property="person" label="职位" ></el-table-column>
          <el-table-column property="waringji" label="联系电话"></el-table-column>
          <el-table-column property="waringDate" label="工号"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'fourth'" :data="tableData4"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号"></el-table-column>
          <el-table-column property="station" label="设备名称" ></el-table-column>
          <el-table-column property="content" label="设备编号" ></el-table-column>
          <el-table-column property="person" label="设备地点" ></el-table-column>
          <el-table-column property="waringji" label="设备厂家"></el-table-column>
          <el-table-column property="waringDate" label="设备状态"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          background
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

<!--    详情-->
    <div class="h100"  v-show="dialogTableVisible">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
<!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div v-if="activeName === 'first'" class="warningContent">
          <div class="wt"><span>{{ form.waringji }}</span><i class="el-icon-warning ml10" style="font-size: 1.5rem;color: #E6307B;"></i></div>
          <div>
            <div class="baseSession">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>告警位置：</span>
                    <span>{{form.station}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>告警标题：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>级别：</span>
                    <span>{{form.waringji}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>告警类别：</span>
                    <span>{{form.waringtype}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>告警设备：</span>
                    <span>{{form.waringshe}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>来源：</span>
                    <span>{{form.waringyuan}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>告警时间：</span>
                    <span>{{form.waringdate}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>告警状态：</span>
                    <span>{{form.status}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"></el-table-column>
                <el-table-column property="station" label="时间" ></el-table-column>
                <el-table-column property="content" label="状态" ></el-table-column>
                <el-table-column property="person" label="处理人" ></el-table-column>
                <el-table-column property="waringDate" label="联系电话"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="warningContent">
          <div class="wt"><span>调度详情</span></div>
          <div>
            <div class="baseSession">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>调度位置：</span>
                    <span>{{form.station}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>调度内容：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>级别：</span>
                    <span>{{form.waringji}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>携带耗材：</span>
                    <span>{{form.waringtype}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>运营车辆：</span>
                    <span>{{form.waringshe}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>任务路线：</span>
                    <span>{{form.waringyuan}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>开始时间：</span>
                    <span>{{form.waringdate}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">

                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"></el-table-column>
                <el-table-column property="station" label="时间" ></el-table-column>
                <el-table-column property="content" label="状态" ></el-table-column>
                <el-table-column property="person" label="处理人" ></el-table-column>
                <el-table-column property="waringDate" label="联系电话"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'third'" class="warningContent1">
          <div class="wt"><span>考勤详情</span>
            <div class="ml20">
              <el-date-picker
                v-model="kaoqinDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="wb">
            <div class="baseSession">
                <div class="leftSession">
                    <p>姓名：业光</p>
                    <p>职位：工程师</p>
                    <p>入职时间：2024-02-01</p>
                    <p>联系电话：17602323465</p>
                </div>
                <div class="rightSession">
                  <div id="kaoecharts" class="echart"></div>
                </div>
            </div>

          </div>
        </div>
        <div v-if="activeName === 'fourth'" class="warningContent">
          <div class="wt"><span>设备详情</span></div>
          <div>
            <div class="baseSession">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <span>设备名称：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备地点：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>设备编号：</span>
                    <span>{{form.waringji}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备厂家：</span>
                    <span>{{form.waringtype}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>设备状态：</span>
                    <span>{{form.waringshe}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备厂家联系电话：</span>
                    <span>{{form.waringyuan}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>运行开始时间：</span>
                    <span>{{form.waringdate}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
<!--                    <span>告警状态：</span>-->
<!--                    <span>{{form.status}}</span>-->
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"></el-table-column>
                <el-table-column property="station" label="故障时间" ></el-table-column>
                <el-table-column property="content" label="故障原因" ></el-table-column>
                <el-table-column property="person" label="处理人" ></el-table-column>
                <el-table-column property="waringDate" label="联系电话"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>

      </div>
    </div>

<!--    新建弹框-->
    <div class="h101"  v-show="dialogjiexi">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
<!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>

        <div v-if="activeName === 'first'"  class="warningContent">
          <div class="wt"><span>数据字典新增</span></div>
          <div class="wb">
            <div class="baseSession">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="序号" prop="xh">
                      <el-input v-model.number="ruleForm.xh"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="模块名称" prop="station">
                      <el-input v-model="ruleForm.station"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="字典类型" prop="content">
                      <el-input v-model="ruleForm.content"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="key" prop="person">
                      <el-input v-model="ruleForm.person"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="名称" prop="waringji">
                      <el-input v-model="ruleForm.waringji"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="排序" prop="waringDate">
                      <el-input v-model.number="ruleForm.waringDate"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
              </el-form>



            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="warningContent">
          <div class="wt"><span>应急预案新建</span></div>
          <div class="wb">
            <div class="baseSession">
              <el-form :model="emergencyForm" :rules="rules1" ref="emergencyForm" label-width="120px" class="emergency-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="水厂名称" prop="plantName">
                      <el-input v-model="emergencyForm.plantName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所在地区" prop="location">
                      <el-input v-model="emergencyForm.location"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="联系人" prop="contactPerson">
                      <el-input v-model="emergencyForm.contactPerson"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话" prop="contactNumber">
                      <el-input v-model="emergencyForm.contactNumber"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="应急预案内容" prop="emergencyPlan">
                  <el-input type="textarea" v-model="emergencyForm.emergencyPlan"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('emergencyForm')">确认</el-button>
                  <el-button @click="resetForm('emergencyForm')">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'third'"  class="warningContent">
          <div class="wt"><span>出勤率对比</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'fourth'" class="warningContent">
          <div class="wt"><span>设备故障率对比</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "total",
  data() {
    return {
      dialogTableVisible:false,
      dialogjiexi:false,
      tableData1:[
        {
          "xh": 1,
          "station": "进水口",
          "content": "水厂设备",
          "person": "inlet",
          "waringji": "进水口名称",
          "waringDate": 1
        },
        {
          "xh": 2,
          "station": "初期处理",
          "content": "水厂设备",
          "person": "preliminary",
          "waringji": "初期处理设备名称",
          "waringDate": 2
        },
        {
          "xh": 3,
          "station": "沉淀池",
          "content": "水厂设备",
          "person": "settling",
          "waringji": "沉淀池名称",
          "waringDate": 3
        },
        {
          "xh": 4,
          "station": "过滤池",
          "content": "水厂设备",
          "person": "filtration",
          "waringji": "过滤池名称",
          "waringDate": 4
        },
        {
          "xh": 5,
          "station": "消毒装置",
          "content": "水厂设备",
          "person": "disinfection",
          "waringji": "消毒装置名称",
          "waringDate": 5
        },
        {
          "xh": 6,
          "station": "出水口",
          "content": "水厂设备",
          "person": "outlet",
          "waringji": "出水口名称",
          "waringDate": 6
        }
      ],
      tableData2:[
        {
          xh:'1',
          plantName: '水厂',
          location: '某某省某某市',
          contactPerson: '张三',
          contactNumber: '123456789',
          emergencyPlan: '在突发情况下，立即启动应急预案，进行紧急处理，并通知相关部门协助处理。'
        },
        {
          xh:'2',
          plantName: '水厂',
          location: '某某省某某市',
          contactPerson: '李四',
          contactNumber: '987654321',
          emergencyPlan: '应急预案内容...'
        },
        {
          xh:'3',
          plantName: '水厂',
          location: '某某省某某市',
          contactPerson: '王五',
          contactNumber: '135792468',
          emergencyPlan: '应急预案内容...'
        }

      ],
      tableData3:[
        {
          xh:1,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'重要告警',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'一般告警',
          waringDate:'2024-3-30'
        }
      ],
      tableData4:[
        {
          xh:1,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'重要告警',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'一般告警',
          waringDate:'2024-3-30'
        }
      ],
      // 总条数
      total: 10,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        valueDate: null,
      },
      activeName:'first',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      valueDate: '',
      form:{
        waringji:'严重告警',
        station:'梁家务村处理站',
        content:'更换xxxx',
        waringtype:'耗材告警',
        waringshe:'垃圾桶',
        waringyuan:'xx',
        waringdate:'2024-01-01',
        status:'已自动派单',
      },
      tableHis:[{
        xh:1,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:2,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:3,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:4,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      }],
      kaoqinDate:'',
      ruleForm: {
        xh: null,
        station: '',
        content: '',
        person: '',
        waringji: '',
        waringDate: null
      },
      rules: {
        xh: [
          { required: true, message: '请输入序号', trigger: 'blur' }
        ],
        station: [
          { required: true, message: '请输入模块名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入字典类型', trigger: 'blur' }
        ],
        person: [
          { required: true, message: '请输入key', trigger: 'blur' }
        ],
        waringji: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        waringDate: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      },
      emergencyForm: {
        plantName: '',
        location: '',
        contactPerson: '',
        contactNumber: '',
        emergencyPlan: ''
      },
      rules1: {
        plantName: [
          { required: true, message: '请输入水厂名称', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入所在地区', trigger: 'blur' }
        ],
        contactPerson: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        emergencyPlan: [
          { required: true, message: '请输入应急预案内容', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {

  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      switch (tab.name) {
        case 'first':
          // this.getList1();
          break;
        case 'second':
          // this.getList2();
          break;
        case 'third':
          // this.getList3();
          break;
        case 'fourth':
          // this.getList4();
          break;
        default:
          break;
      }
    },

    //图形解析
    jiexi(){

      this.dialogjiexi = true;
      this.jiexifunction()
    },

    //解析方法

    jiexifunction(){
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 0,
          top: '8%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false // 不显示x轴标签
          },
          axisLine: {
            // x轴线的颜色以及宽度
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          },
          axisTick: {
            show: false // x轴刻度线
          },
          splitLine: { // x轴网格线
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          }
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false }, // y轴刻度线
          axisLabel: { color: '#fff' }, // y轴文字的配置
          axisLine: {
            //x轴线的颜色
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          },
          data: ['1','2','3','4','5']
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside', //显示在柱子内部
                textStyle: { color: '#fff' },
                formatter: '{c}' //单位
              }
            },
            itemStyle: {
              color: {
                colorStops:[ //柱子的渐变色
                  {
                    offset: 0,
                    color: 'rgba(5, 80, 57, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(24,86,183)' // 100% 处的颜色
                  }
                ],
                global: false
              }
            },
            barWidth: 20, //柱子的宽度
            data: [88,75,53,39,36]
          }
        ]
      }

      this.myChart = echarts.init(document.getElementById("totalecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogjiexi = false;
    },

    /** 查看按钮操作 */
    handleUpdate(row) {
      this.dialogTableVisible = true;
      this.kaoqinEcharts()



      // this.reset();
      // const storeId = row.storeId || this.ids
      // getCkxx(storeId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      // });
    },
    kaoqinEcharts(){

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: 'white' // 设置图例文本的颜色为红色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '在岗' },
              { value: 735, name: '迟到' },
              { value: 580, name: '早退' },
              { value: 300, name: '请假' }
            ]
          }
        ]
      };

      this.myChart = echarts.init(document.getElementById("kaoecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });


    },
    getWaringColor(waringji) {
      switch (waringji) {
        case '严重告警':
          return '#E6307B'; // 严重告警的颜色
        case '重要告警':
          return '#ED6942'; // 重要告警的颜色
        case '一般告警':
          return '#0289FF'; // 一般告警的颜色
        default:
          return ''; // 默认颜色
      }
    }
  }
};
</script>

<style scoped lang="scss">
.total{
  width: 100%;
  height: 100%;
  :deep(.el-form-item__label){
    color: white;
  }
   :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
   :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
   :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
   :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
   :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
   :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
   :deep(.el-table::before) {
    height: 0px;
  }
  .contentDiv{
    position: absolute;
    width: 80%;
    left: 18%;
    top: 7%;
    .searchDiv{
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      z-index: 9999;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-top: 3rem;
      .waringStyle{



      }

    }

    .tableList{
       padding: 1rem 0;

      .pagination-container{
        background: transparent;
      }
       :deep(.el-pagination__total){
        color: white;
      }
       :deep(.el-pagination__jump) {
        color:white;
      }
    }
  }


  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
       :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
       :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .warningContent{
        padding: 2rem 3rem;
        color: white;
        div:nth-of-type(1) span{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
        }
        div:nth-of-type(2){
          .baseSession{
            margin-top: 1.5rem;
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 2.2rem;
              color: #FFFFFF;
            }
          }
          .mt10{
             :deep(.el-table thead) {
              background-color: #01B0FF!important;
            }
          }
        }


      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
        .wb{
          height: 80%;
          .baseSession{
            height: 100%;
            margin-top: 1.5rem;
            display: flex;
            .leftSession{
                flex: 1;
                padding: 3rem;
              p{
                line-height: 2rem;
              }
            }
            .rightSession{
                flex: 1;
                #kaoecharts{
                  width: 30rem;
                  height: 30rem;
                }
            }
          }
        }


      }
    }
  }

  .h101{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .warningContent{
        width: 100%;
        height: 100%;
        padding: 2rem 3rem;
        color: white;
        .wt {
          width: 100%;
          height: 5%;
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        .wb{
          width: 100%;
          height: 95%;
          .baseSession{
            width: 100%;
            height: 100%;
            margin-top: 1.5rem;
            .echart{
              width: 65rem;
              height: 32rem;
            }
          }
        }


      }
    }
  }
}


</style>

